<script lang="ts" >
import {
    defineComponent,
    ref,
    onMounted,
    nextTick,
    watch,
    PropType,
} from "vue";
import { toStringMatch, fromWei, toWei } from "@/utils/format";
import * as echarts from "echarts";
export default defineComponent({
    setup(props) {
        const colorList = ["rgba(11, 166, 98, 1)", "rgba(11, 166, 98, 0)"];
        const chart = ref();
        let chartData2: number[] = [];
        const initEcgarts = (ChartData: any) => {
            const data = () => {
                const chartDay: string[] = [];
                const chartData: number[] = [];
                chartData2 = []
                for (let index = 0; index < ChartData.length; index++) {
                    const element = ChartData[index];
                    chartData.push(toStringMatch(element.Price));
                    chartData2.push(element.Price);
                    chartDay.push(element.CreatedAt.substring(0, 10));
                }
                chartData.reverse();
                chartDay.reverse();
                return {
                    chartData,
                    chartDay,
                };
            };
            const { chartDay, chartData } = data();
            const massEchart = echarts.init(chart.value);
            const option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(11, 166, 98, 1)",
                    borderColor: "rgba(11, 166, 98, 1)",
                    textStyle: {
                        color: "white",
                    },
                    formatter: (params: string | any[]) => {
                        let returnData = params[0] ? params[0].name + "</br>" : "";
                        for (let i = 0; i < params.length; i++) {
                            let indexColor = params[i].color;
                            returnData += params[i].marker;
                            returnData +=
                                `<span style="display:inline-block;margin-left:15px;">` +
                                chartData2[(chartData2.length - 1) - params[i].dataIndex] +
                                "</span></br>";
                        }
                        return returnData;
                    },
                },
                grid: {
                    top: "3%",
                    left: "3%",
                    right: "0%",
                    bottom: "0%",
                    containLabel: true,
                },
                xAxis: {
                    data: chartDay,
                    axisLabel: {
                        textStyle: {
                            color: "rgba(0,0,0,0.5)",
                        },
                    },
                },
                yAxis: [
                    {
                        show: true,
                        type: "value",
                        splitLine: { show: false },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "rgba(0,0,0,0.5)",
                            },
                        },
                        boundaryGap: [0, "100%"],
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        startValue: chartData.length - 7,
                        // minValueSpan: 1,
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        stack: "Total",
                        // smooth: true,
                        // showSymbol: props.showSymbol,
                        color: colorList[0],
                        areaStyle: {
                            opacity: 0.3,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: colorList[0],
                                },
                                {
                                    offset: 1,
                                    color: colorList[1],
                                },
                            ]),
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                fontSize: 14,
                                color: "#ffff",
                            },
                            formatter: (params: { dataIndex: number; value: any }) => {
                                if (option.series[0].data.length - 1 == params.dataIndex) {
                                    return params.value;
                                } else {
                                    return "";
                                }
                            },
                        },
                        data: chartData,
                    },
                ],
            };
            massEchart.setOption(option);
        };
        return {
            initEcgarts,
            chart,
        };
    },
});
</script>
<template>
    <div class="chart">
        <div ref="chart" style="width: 100%; height: 220px"></div>
    </div>
</template>
<style lang="less" scoped>
.chart {
    padding: 20px 0;
    background: #fff;
}
</style>
